<style lang="scss">
  @import "~@/styles/base";

  .page {
    height: 100vh;
    .page-bind {
      background-color: #fff;
      border-radius: rpx(10);
      min-height: 100%;
      padding: rpx(70) rpx(40) rpx(50);
      .icon-success {
        display: block;
        width: rpx(316);
        height: rpx(283);
        margin-left: auto;
        margin-right: auto;
      }
      .tip {
        padding-top: rpx(55);
        font-size: rpx(34);
        line-height: rpx(54);
        text-align: center;
        color: $black;
      }
      .tip-desc {
        padding-bottom: rpx(60);
        font-size: rpx(28);
        color: $black;
        line-height: rpx(54);
        text-align: center;
      }
      .title {
        padding-top: rpx(85);
        font-size: rpx(24);
        color: $light-black;
        line-height: rpx(40);
        text-align: center;
      }
      .device-name {
        display: block;
        margin: rpx(18) auto rpx(260);
        width: rpx(500);
        height: rpx(70);
        line-height: rpx(70);
        font-size: rpx(28);
        color: $black;
        border-radius: rpx(35);
        background-color: #ecf0f3;
        text-align: center;
      }
    }
  }
</style>
<template>
  <div class="page">
    <div class="page-bind">
      <img class="icon-success" src="/static/img/bind/success.png">
      <div class="tip">恭喜您</div>
      <div class="tip-desc">设备添加成功</div>
      <div class="title">设备重命名</div>
      <input class="device-name" v-model="name" type="text" placeholder-class="placeholder"/>
      <button class="btn" @getuserinfo="toNex" open-type="getUserInfo">添加台灯主人信息</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
      };
    },
    components: {},
    methods: {
      async toNex(e){
        const userInfo = e.mp.detail.userInfo;
        console.info(userInfo)
        if (!this.name) {
          wx.showToast('请输入台灯名称')
          return false;
        }
        wx.showLoading();
        await wx.request({
          method: 'PUT',
          url: '/app/bindings/' + App.currentDevice.did,
          data: {
            dev_alias: this.name
          },
          header: {
            'X-Gizwits-User-token': App.loginInfo.token,
          }
        })
        wx.hideLoading();
      }
    },
    async onShow() {
      this.name = App.currentDevice.product_name;
    }
  };
</script>
